<template>
  <el-form label-position="top" class="p-10">
     <el-form-item label="图片地址">
        <el-input
          v-model="activeData.extConfig.url"
          placeholder="请输入图片地址"
        >
        <el-button slot="append" @click="showImageDialog">D</el-button>
        </el-input>
    </el-form-item>
    <el-form-item label="图片高度(px)">
      <el-input-number
        v-model="activeData.extConfig.imageHeight"
        placeholder="图片高度"
        />
    </el-form-item>
    <el-form-item label="图片宽度(px)">
        <el-input-number
          v-model="activeData.extConfig.imageWidth"
          placeholder="图片宽度"
        />
    </el-form-item>
     <el-form-item label="开启水印">
      <el-switch v-model="activeData.extConfig.showWatermark" />
    </el-form-item>
    <el-form-item label="水印内容" v-show="activeData.extConfig.showWatermark">
      <VW v-model="activeData.extConfig.watermarkContent">
        <el-input
          v-model="activeData.extConfig.watermarkContent"
          placeholder="请输入水印内容"
        />
      </VW>
    </el-form-item>
    <el-form-item label="水印内容颜色" v-if="activeData.extConfig.showWatermark">
      <el-color-picker show-alpha v-model="activeData.extConfig.watermarkColor"></el-color-picker>
    </el-form-item>
    <el-form-item label="开启裁剪">
       <el-switch v-model="activeData.extConfig.showCrop" />
    </el-form-item>
     <el-form-item label="裁剪比例" v-if="activeData.extConfig.showCrop">
        <el-radio-group v-model="activeData.extConfig.cropMode">
        <el-radio label="auto">自动</el-radio>
        <el-radio label="fixed">固定</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="裁剪宽高比" v-if="activeData.extConfig.showCrop && activeData.extConfig.cropMode === 'fixed'">
       <VW v-model="activeData.extConfig.fixedNumber">
        <el-input
          v-model="activeData.extConfig.fixedNumber"
          placeholder="请输入宽高比, 形如1, 1"
        />
      </VW>
    </el-form-item>
    <ImageSetting v-if="dialogVisible" :imgWidth="activeData.extConfig.imageWidth" :imgHeight="activeData.extConfig.imageHeight" @close="close" @input="handleInput" />
  </el-form>
</template>
<script>
import ImageSetting from '../../base/ImageSeting'
export default {
    name:'image-config',
    props:['activeData'],
    components: { ImageSetting },
    data(){
      return {
        dialogVisible: false,
      }
    },
    computed:{
    },
    watch:{
     
    },
    methods: {
      showImageDialog() {
        console.log(this.activeData)
        this.dialogVisible = true
      },
      close() {
        this.dialogVisible = false
      },
      handleInput(url) {
        this.$set(this.activeData.extConfig, 'url', url)
      },
    },
}
</script>